<template>
  <div class="demo">
    <h1>{{videocnameu}}</h1>
    <el-badge :value="likenumber" class="item">
      <el-button size="small" @click="likeclick">点赞</el-button>
    </el-badge>
    <el-badge :value="collectnumber" class="item">
      <el-button size="small" @click="collectclick">收藏</el-button>
    </el-badge>

    <el-dropdown trigger="click">
   <span class="el-dropdown-link">
    付费<i class="el-icon-caret-bottom el-icon--right"></i>
   </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item class="clearfix">
       打赏
          <el-badge class="mark" :value="0" />
        </el-dropdown-item>
        <el-dropdown-item class="clearfix">
         开通权限
          <el-badge class="mark" :value="1" />
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
    >
    </video-player>
    <h1>请发表你的观点</h1>
    <el-input
      type="textarea"
      :rows="2"
      placeholder="请输入内容"
      v-model="commenttext.textarea">
    </el-input>
    <el-button type="success" icon="el-icon-check" @click="commentclick" circle>提交评论</el-button>
    <h1>评论</h1>
    <template>
      <el-table
        :data="commentdata"
        style="width: 100%">
        <el-table-column
          prop="comment_time"
          label="发表时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="来自"
          width="180">
        </el-table-column>
        <el-table-column
          prop="comment_words"
          label="观点">
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
<script>
  import axios from "axios";
  export default {
    data() {

      return {
        videocnameu:'',
        likenumber:'',
        collectnumber:'',
        commentdata:{},

        commenttext: {
          textarea: '',
          vid: '',
        },


        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
          autoplay: false, // 如果为true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 是否视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: "zh-CN",
          aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources:[ {
            type: "video/mp4", // 类型
            // url地址
            src: "",
          }
          ],


          poster: "", // 封面地址
          notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, // 当前时间和持续时间的分隔符
            durationDisplay: true, // 显示持续时间
            remainingTimeDisplay: false, // 是否显示剩余时间功能
            fullscreenToggle: false, // 是否显示全屏按钮
          },
        },
      };
    },
    methods:{
      findlikeandcollectandcomment(){
        var vid=this.$route.params.id;
        axios.post('http://localhost:8088/video/findlike',{id:vid}).then(res=>{
          if(res.data.code==0) {
            this.likenumber = res.data.total;
          }
    }),
          axios.post('http://localhost:8088/video/findcollect',{id:vid}).then(res=>{
            if(res.data.code==0) {
              this.collectnumber = res.data.total;
            }
          }),
         axios.post('http://localhost:8088/video/findcomment',{id:vid}).then(res=>{
            if(res.data.code==0) {
              this.commentdata = res.data.data;
            }
          })

  },
      findbyid(){
        var vid=this.$route.params.id;
        axios.post('http://localhost:8088/video/findid',{id:vid}).then(res=>{
          if(res.data.code==0) {
            this.playerOptions.sources[0].src = res.data.videourl;
            this.videocnameu = res.data.videocname;
          }
        })
      },
      likeclick(){
        var vid=this.$route.params.id;
        axios.post('http://localhost:8088/video/addlike',{id:vid}).then(res=>{
          if(res.data.code==0) {
            this.likenumber = res.data.total;
          }else {
            alert(res.data.message);
          }
        })
      },
      collectclick(){
        var vid=this.$route.params.id;
        axios.post('http://localhost:8088/video/addcollect',{id:vid}).then(res=>{
          if(res.data.code==0) {
            this.collectnumber = res.data.total;
          }else {
            alert(res.data.message);
          }
        })
      },
      commentclick(){
        var vid1=this.$route.params.id;
        this.commenttext.vid=vid1;
        axios.post('http://localhost:8088/video/addcomment',this.commenttext).then(res=>{
          if(res.data.code==0) {
            //提交成功后，清除文本域
            this.commenttext.textarea='';
            this.commentdata = res.data.data;
          }else {
            alert(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.findbyid();
      this.findlikeandcollectandcomment();
    }
  }

</script>

